昨天大致介紹了 React 的兩個框架，Gatsby & Next.js
今天就來針對 Next.js 來介紹，並且讓我們來 new 一個新的 Next.js 專案

new 一個 Next.js 專案

其實新建一個 Next.js 專案非常簡單只要在終端機執行下面的命令

npx create-next-app@latest '你的專案名稱'
# or
yarn create next-app '你的專案名稱'

如果你想使用 TypeScript 來創造一個專案的話 Next.js，只要在指令後面加上--ts 或是 --typescript

npx create-next-app@latest --ts
# or
yarn create next-app --typescript

之後再在終端機輸入這些指令，進入剛剛做好的資料夾，並連上本機的 port

cd '你的專案名稱'

npm run dev 
# or
yarn run dev

就會看到這個畫面了

Next.js 的資料夾結構

我們可以看到其實跟 React 專案的資料夾結構很像，但是有個不同的地方就是 Next.js 多了一個 Page 資料夾，這就是讓你可以製作路徑的地方，也就是我們使用 Next.js 的理由，
當SPA 無法滿足我們網站的需求時，我們就會使用像是 Next.js 這就可以幫我們做出多個路徑的框架

之後我們也會依照慣例做出個 Components 資料夾專門來放元件

那我們要怎麼做出新的路徑呢？ file-based routing

很簡單我們只要在 page 資料夾裡面做出一個資料夾裡面在入index.jsx，好像有點繞口，其實就只是做出像下圖這樣

並在這個 posts/index.jsx 寫上自己要的內容
我這邊簡單地寫上了一個 h1

// pages/posts/index.jsx
const Page = () => {
  return (
    <h1>Post 的頁面！</h1>
  )
}

export default Page

之後我們回到首頁將頁面改成這樣

// pages/index.js
export default function Home() {
  return (
    <>
      <h1>首頁</h1>
      <a href="/posts">前往 Posts 頁面</a>
    </>
  )
}

只要點擊 a 連結就可以成功到達我們做的 posts 頁面了

所以讓我們複習一下
我們在 pages 資料夾可以製造路徑

做出 pages/posts/index.jsx 產生 /posts 頁面
做出 pages/users/index.jsx 產生 /users 頁面

這種產生路經的方式叫做 file-based routing

小結

今天介紹了 Next.js 要怎麼製造出多個路徑出來，明天會在繼續針對 route 講解下去，謝謝大家